﻿<div>
    <Button Type="ButtonType.Primary" OnClick="_=>open()">Open</Button>

    <Drawer Width="@wdFirstLayer" Closable="true" Visible="visible1" Title='("Multi-level drawer")' OnClose="_=>close()">
        <Button Type="ButtonType.Primary" OnClick="_=>ShowDrawer()">Two-level Drawer</Button>
        <Drawer Width="260" Closable="true" Visible="visible2" Title='("two-level drawer")' OnClose="_=>CloseDrawer()">
            <Button Type="ButtonType.Primary">This is two-level drawer</Button>
        </Drawer>

    </Drawer>
</div>

   @code{

       bool visible1 = false;
       bool visible2 = false;
        string wdFirstLayer = "520";

        void open()
        {
            this.visible1 = true;
        }

        void ShowDrawer()
        {

            this.visible2 = true;
            wdFirstLayer = $"{int.Parse(wdFirstLayer) + 260}";
        }

        void close()
        {
            this.visible1 = false;
        }

        void CloseDrawer()
        {
            wdFirstLayer = $"{int.Parse(wdFirstLayer) - 260}";
            this.visible2 = false;
        }

}